// 模块的GIS逻辑
import Util from '../../Util';
const componentBase = (G as any).base.ComponentBase;
const component = componentBase.extend({
    // 属性
    options: {
        highLightId: 'comprehensive_sjts', // 高亮id
        popupId: 'popup_comprehensive_sjts', // 弹窗唯一标识
        popupEventName: 'popup', // 详情框事件名
        featureType: 'comprehensive_sjts', // 图层标识
    },
    // 初始化
    initialize(options: any) {
        componentBase.prototype.initialize.call(this, options);
    },
    //  销毁
    destroy() {
        componentBase.prototype.destroy.call(this);
    },

    load() {
        componentBase.prototype.load.call(this);
        //
        this._load();
    },

    addListeners() {
        // 添加事件监听，load调用时父类触发
    },

    unload() {
        this.options.simpleRenderMgr.remove(this.options.featureType);
        this.closePopup();
        this._removehighlight();
        componentBase.prototype.unload.call(this);
    },

    removeListeners() {
        // 移除事件监听，unload调用时父类触发
    },

    closePopup() {
        this.options.popupManager.remove(this.options.popupId);
    },

    async _load() {
        const list: any = await this.options.service.getDemoData();
        const opts: any = {};
        opts.featureType = this.options.featureType;
        opts.idField = 'id'; // 数据唯一标识的属性
        opts.list = list; // 数据列表
        opts.type = 1; // 使用feature渲染
        opts.geometryBuilder = new this.options.PointGeometryBuilder({
            geometryField: ['longitude', 'latitude'],
        });
        const symbolObj: any = {
            type: 'PictureMarkerSymbol',
            options: {
                width: 34,
                height: 46,
                offsetX: 17,
                offsetY: 46,
                opacity: '1',
                rotation: '0',
                source: this.options.symbolConfig.icons.demo_icon,
            },
        };
        const SymbolBuilder = (G as any).utils.SymbolBuilder.extend({
            build: (data: any) => {
                return G.utils.RenderUtil.object2Symbol(symbolObj);
            },
        });
        opts.symbolBuilder = new SymbolBuilder(),
        opts.listeners = {
            click: (event: any) => {
                const element: any = event[0].element;
                console.debug('点击：');
                console.debug(element);
                this.closePopup();
                this._removehighlight();
                this._addHighlight(element);
                this.options.popupManager.addSimple({
                    id: this.options.popupId,
                    anchor: [ element.geometry.x, element.geometry.y],
                    className: 'demo-tooltip',
                }).then((content: any) => {
                    this.fire(this.options.popupEventName, {
                        data: Util.attributeSet2Object(element.attributeSet),
                        containerId: content.containerId,
                        type: 'demo',
                    });
                });
            },
        };
        this.options.simpleRenderMgr.add(opts);
        this._fit();
    },

    // 调整视野
    _fit() {
        const layer: any = this.options.simpleRenderMgr.getLayer(this.options.featureType);
        const extent: any = G.utils.LayerUtil.getLayerExtent(layer);
        this.map.pan(extent, new Array(4).fill(100));
    },

    // 添加高亮
    _addHighlight(element: any) {
        const coordinate: any = [element.geometry.x, element.geometry.y];
        const symbolObj: any = {
            type: 'PictureMarkerSymbol',
            options: {
                width: 64,
                height: 70,
                offsetX: 32,
                offsetY: 70,
                opacity: 1,
                rotation: 0,
                source: this.options.symbolConfig.icons.demo_icon_hover,
            },
        };
        const options = {
            data: {
              type: 'wkt',
              geom: 'POINT(' + coordinate[0] + ' ' + coordinate[1] + ')',
            },
            style: symbolObj,
            // 不闪烁
            blink: {
              enable: false,
            },
          };
        this.options.featureHighlight.addHighlight(this.options.highLightId, options);
    },

    // 移除高亮
    _removehighlight() {
        this.options.featureHighlight.removeHighlight(this.options.highLightId);
    },
});

export default component;
